import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { PlayListWrapper } from './style'
import { useAppSelector } from '@/store'
import { shallowEqual } from 'react-redux'
import SongsCover from '@/components/songs-cover'
import { Skeleton } from 'antd'

interface IProps {
  children?: ReactNode
}

const PlayList: FC<IProps> = () => {
  const { categorySongs } = useAppSelector(
    (state) => ({
      categorySongs: state.musicplayer.categorySongs
    }),
    shallowEqual
  )
  console.log(categorySongs, 'categorySongs')
  const songList = categorySongs || []
  // const total = categorySongs.total || 0
  return (
    <PlayListWrapper>
      {!songList.length ? (
        <Skeleton active />
      ) : (
        <div className="songs-list">
          {songList.map((item: any, index: number) => {
            return <SongsCover info={item} key={index} />
          })}
        </div>
      )}
    </PlayListWrapper>
  )
}

export default memo(PlayList)
